<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
		<title>Kanakku - Bootstrap Admin HTML Template</title>

		<!-- Favicon -->
		<link rel="shortcut icon" href="assets/img/favicon.png">

		<link rel="stylesheet" href="assets/css/element.css">
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="assets/css/bootstrap.min.css">

		<!-- Fontawesome CSS -->
		<link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
		<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">

		<!-- Main CSS -->
		<link rel="stylesheet" href="assets/css/style.css">
		<script src="assets/js/vue.js"></script>
		<script src="assets/js/axios.js"></script>
		<script src="assets/js/element.js"></script>
		<script src="assets/util/request.js"></script>
		<script src="assets/util/jsencrypt.js"></script>
		<script src="assets/util/localStorageUtil.js"></script>

		<!--[if lt IE 9]>
			<script src="assets/js/html5shiv.min.js"></script>
			<script src="assets/js/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>

		<!-- Main Wrapper -->
		<div class="main-wrapper login-body" id="reg">

			<div class="login-wrapper">
				<div class="container">
					<img class="img-fluid logo-dark mb-2" src="assets/img/logo.png" alt="Logo">

					<div class="loginbox">
						<div class="login-right">
							<div class="login-right-wrap">
								<h1><strong>注册</strong></h1>

								<!-- Form -->
								<el-form :rules="rules" :model="registerForm" ref="ruleForm">

									<el-form-item prop="nickname">
										<el-input
											   type="text"
											   v-model="registerForm.nickname"
											   placeholder="姓名"
										>
										</el-input>
									</el-form-item>

									<el-form-item prop="email">
										<el-input
											   type="email"
											   v-model="registerForm.email"
											   placeholder="邮箱"
										>
										</el-input>
									</el-form-item>

									<el-form-item prop="password">
										<el-input
											   type="password"
											   v-model="registerForm.password"
											   placeholder="密码"
										>
										</el-input>
									</el-form-item>


									<el-form-item prop="confirmPassword">
										<el-input
											   type="password"
											   v-model="registerForm.confirmPassword"
											   placeholder="确认密码"
											   @keyup.enter.native="registered"
										>
										</el-input>
									</el-form-item>

									<el-form-item prop="code">

										<el-input
											   v-model="registerForm.code"
											   placeholder="验证码"
											   @keyup.enter.native="registered">
											<el-button slot="append" v-show="codeShow" v-on:click="getEmailCode">发送验证码</el-button>
											<el-button slot="append" v-show="!codeShow" v-on:click="getEmailCode"  disabled="disabled">{{count}}s后重试</el-button>

										</el-input>

									</el-form-item>

									<div class="form-group mb-0">
										<button class="btn btn-lg btn-block btn-primary" type="button" v-on:click="registered">注册</button>
									</div>
								</el-form>
								<!-- /Form -->

								<div class="login-or">
									<span class="or-line"></span>
									<span class="span-or">or</span>
								</div>
								<!-- Social Login -->
								<div class="social-login">
									<span>其他方式注册</span>
									<a href="https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101583722&redirect_uri=http://ailuoli.cn:9527/qqlogin/success" class="tencent"><img src="assets/img/qq-logo.jpg" alt="qq login"></a>
								</div>
								<!-- /Social Login -->
								<div class="text-center dont-have">已经有账户 ? <a href="login.html">登录</a></div>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
		<!-- /Main Wrapper -->

		<!-- jQuery -->
		<script src="assets/js/jquery-3.5.1.min.js"></script>

		<!-- Bootstrap Core JS -->
		<script src="assets/js/popper.min.js"></script>
		<script src="assets/js/bootstrap.min.js"></script>

		<!-- Feather Icon JS -->
		<script src="assets/js/feather.min.js"></script>

		<!-- Custom JS -->
		<script src="assets/js/script.js"></script>

	</body>

<script>

	let storage = new Storage();

	var reg = new Vue({
		el: '#reg',
		data() {
			const checkEmail = (rule,value,callback) =>{
				const pattern = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
				if(!pattern.test(value)){
					callback(new Error("请输入格式正确的邮箱"))
				}else{
					callback();
				}

			};

			const checkConfirmPassword = (rule,value,callback) =>{
				if(value==='' || value === null){
					callback(new Error("确认密码不能为空"));
				}
				if(!(this.registerForm.password===this.registerForm.confirmPassword)){
					callback(new Error("两次密码必须相同，且不能为空，请检查重新输入"))
				}else{
					callback();
				}

			};

			return{
				encrypt : null,
				codeShow:true,
				count:"",
				timer: null,
				registerForm: {
					nickname: "",
					email:"",
					password:"",
					confirmPassword:"",
					code:"",
				},

				rules: {
					email: [
						{validator: checkEmail,trigger: 'change'}
					],
					nickname: [
						{required: true,message:"昵称不能为空",trigger: 'blur'},
					],
					password: [
						{required: true,message:"请输入密码",trigger: 'blur'},
						{min: 6,max: 30,message: '密码长度6-30位',trigger: 'blur'},
					],
					confirmPassword: [
						{validator: checkConfirmPassword,trigger: 'change'}
					],
					code: [
						{required: true,message:"验证码不能为空",trigger: 'blur'}
					]
				}
			}
		},
		methods:{
			registered(){
				this.$refs['ruleForm'].validate(valid =>{
					if(valid){
						this.initPublicKey();
						service({
							method: 'post',
							url: '/user/email/registered',
							data:{
								nickname: this.registerForm.nickname,
								email: this.registerForm.email,
								password: this.encrypt.encrypt(this.registerForm.password),
								code: this.registerForm.code
							}
						}).then(response=>{
							if(response.data){
								thispoint.$confirm('您的账号注册成功！是否跳转到登录页？', '注册成功', {
									confirmButtonText: '是',
									cancelButtonText: '否',
									type: 'success ',
									center: true
								}).then(() => {
									window.location.href="/login.html"
								}).catch(()=>{
									thispoint.$message({
										type: 'info',
										message: '取消跳转登录'
									})
								})
							}
						})
					}
				})
			},
			getEmailCode() {
				let validateList = [];
				this.$refs['ruleForm'].validateField(['email','nickname','password','confirmPassword'],(message)=>{
					validateList.push(message)
				});
				if(validateList.every(item =>item ==='')){
					this.initPublicKey();
					service({
						method: 'post',
						url: '/user/email/check',
						data:{
							nickname: this.registerForm.nickname,
							email: this.registerForm.email,
							password: this.encrypt.encrypt(this.registerForm.password)
						}
					}).then(response=>{
						if(response.data){
							this.$message({message:"验证码已发送,请您查看邮箱",type: "success"})
							//点击获取验证码
							const TIME_COUNT = 60;  //倒计时60秒
							if (!this.timer) {
								this.count = TIME_COUNT;
								this.codeShow = false;
								this.timer = setInterval(() => {
									if (this.count > 0 && this.count <= TIME_COUNT) {
										this.count--;
									} else {
										this.codeShow = true;
										clearInterval(this.timer);
										this.timer = null;
									}
								}, 1000);
							}
						}
					})
				}
			},
			initPublicKey(){
				this.encrypt = new JSEncrypt();
				this.encrypt.setPublicKey(storage.getItem("publicKey"))
			}

		},

		created(){
			//请求公钥
			getPublicKey();
		},
		mounted() {
			intThisPoint(this);
		}
	})
</script>
</html>
